<template>
	<view class="containWp">
		<u-navbar title="资源" leftIconSize="20px" leftIconColor="#fff" bgColor="transparent" :autoBack="true"
			@leftClick="goBackHome" titleStyle="color:#fff">
		</u-navbar>
		<view class="topBox">
			<view class="searchBox">
				<view class="u-navbar__placeholder" :style="{
						height: $u.addUnit($u.getPx(44) + $u.sys().statusBarHeight,'px'),
					}"></view>
				<cus-search class="search" @search="searchChange" padding="32rpx" placeholder="搜索您想要的资源"></cus-search>
			</view>
			<view class="tabsBox" v-show="!showSearchList">
				<view class="tabs">
					<u-tabs :list="tabsList" @click="tabChange" lineWidth="30rpx" lineHeight="4"
						:itemStyle="{color:'#276AEE',fontWeight:'500',fontSize:'28rpx'}" lineColor="#276AEE"
						:activeStyle="{color:'#276AEE'}"></u-tabs>
				</view>
				<view class="tabChange flex_between_center" v-if="showVisibleType">
					<view class="tabChangeItem" :class="{selectTabItem:current == index} "
						v-for="(item,index) in tabsListChange" :key="index" @tap="changeTab(index)">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="labelBox flex_start_start" v-show="!showSearchList">
				<view class="label flex_center"
					:style="{backgroundColor:item.infoOpen == 1 ? '#E9F0FD':'#FFF7E8',color:item.infoOpen == 1 ? '#276AEE':'#FF7D00'}"
					v-for="(item,index) in list" :key="index">
					<text style="margin-right: 6rpx;">{{item.name}}</text>
					<u-icon name="close" :color="item.infoOpen == 1 ? '#276AEE':'#FF7D00'" size="24"
						@tap.stop="delLabel(item)"></u-icon>
				</view>
			</view>
			<view class="searchList" v-show="showSearchList">
				<view class="searchItem flex_start_center" v-for="(item,index) in searchList" :key="index"
					@tap="toCard(item)">
					<u-image width="80rpx" height="80rpx" :src="item.head" :lazy-load="true" radius="4"
						mode="aspectFill"></u-image>
					<view class="searchItemInfo flex_column_center_start">
						<text class="name ">
							{{item.userName}}
						</text>
						<text class="company ">
							{{item.company}}
						</text>
						<text>
							{{item.position||''}}
						</text>
					</view>
				</view>
			</view>
			<template v-if="firstLoad">
				<view class="empty flex_center"
					v-if="(!list.length&& !showSearchList) || (!searchList.length && showSearchList)">
					<u-empty mode="data" iconSize="168rpx" textSize="28rpx" text="暂时没有资源"
						icon="https://file.casugn.com/storecompcard/temp/空页面@2x(13)_1681113762268.png">
					</u-empty>
				</view>
			</template>
		</view>
		<view class="popup">
			<u-popup safeAreaInsetBottom :show="showPublish" mode="bottom" @close="showPublish=false" round="16"
				closeable>
				<view class="pop-show">
					<view class="pop-show-top">

						{{showVisibleType?'我的资源':'需要的资源'}}
					</view>
					<view class="content">
						<view class="label">
							{{showVisibleType?'我的资源':'需要的资源'}}
						</view>
						<u-input placeholder="请输入" v-model.trim="resourceVal" maxlength="20" border="none">
						</u-input>
					</view>
					<view class="radioBox" v-show="showVisibleType">
						<view class="label">
							对谁可见
						</view>
						<u-radio-group v-model="visibleType" @change="groupChange" class="radioGroup " placement="row"
							size="40">
							<u-radio label="公开" :name="1" iconSize="30" labelSize="32"></u-radio>
							<u-radio label="仅好友" :name="2" iconSize="30" labelSize="32"></u-radio>
						</u-radio-group>
					</view>
					<view style="margin-top: 80rpx;">
						<u-button type="primary" color="#2684ff" text="添加" :throttleTime="500" @click="addResources">
						</u-button>
					</view>
				</view>
			</u-popup>
		</view>
		<cus-add-btn :safeAreaInsetBottom="false" @click="addHandle" v-show="!showSearchList"></cus-add-btn>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				tabsList: [{
					name: '我拥有的'
				}, {
					name: '我需要的'
				}, ],
				tabsListChange: [{
					name: '全部'
				}, {
					name: '公开'
				}, {
					name: '仅好友'
				}, ],

				activity: 0,
				resourceVal: '',
				queryVal: '',
				searchList: [], //搜索结果
				searchVal: '',
				current: 0,
				visibleType: 1, //可见类型
				status: 0,
				showPublish: false, //显示资源添加弹窗
				showVisibleType: true, //显示
				firstLoad: false, //显示首次加载
				showSearchList: false, //在搜索资源是显示资源列表
				list: []
			}
		},
		onLoad() {
			this.queryMyResources()
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		watch: {
			searchVal(nVal) {
				console.log(nVal, 'this.nVal')
				this.showSearchList = !!nVal
				console.log(this.showSearchList, 'this.showSearchList')
			}
		},
		methods: {
			//跳转名片
			toCard(item) {
				uni.navigateTo({
					url: `/pagesCard/friendMainPage/friendMainPage?cardId=${item.cardId}&openId=${item.openId}&unionId=${item.unionId}`
				})
			},
			//切换资源可见类型
			groupChange(e) {
				console.log(e, this.visibleType, 'visibleType')
			},
			//新增资源
			addHandle() {
				this.showPublish = true
			},
			//切换资源类型
			tabChange(e) {
				this.showVisibleType = !e.index
				this.status = e.index
				this.queryMyResources()
			},
			//切换公开类型
			changeTab(index) {
				this.current = index
				this.queryMyResources()
			},
			async addResources() {
				if (!this.resourceVal) {
					return this.$showToast('请输入资源名称')
				}
				let payload = {
					status: this.status,
					openId: this.userInfo.openId,
					name: this.resourceVal,
					infoOpen: this.visibleType
				}
				//如果是提交需要的资源不需要可见
				if (this.status) delete payload.infoOpen
				let res = await this.$api.addResources(payload)
				if (res.success) {
					this.resourceVal = ""
					this.showPublish = false
					this.queryMyResources()
				} else {
					this.$showToast(res.message)
				}
			},
			async searchChange(text) {
				if (!text.trim()) return this.searchVal = ''
				this.searchVal = text
				let res = await this.$api.queryResourcesByName({
					name: this.searchVal
				})
				if (res.success) {
					this.searchList = res.result
				} else {
					this.searchList = []
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			async delLabel(item) {
				uni.showLoading()
				let res = await this.$api.delResources(item.id)
				if (res.success) {
					this.queryMyResources()
				} else {
					this.$showToast(res.message)
				}
			},
			async queryMyResources() {
				let payload = {
					status: this.status,
					openId: this.userInfo.openId,
					infoOpen: this.current ? this.current : ''
				}
				if (this.status) delete payload.infoOpen
				let res = await this.$api.queryMyResources(payload)
				if (res.success) {
					this.list = res.result || []
				} else {
					this.list = []
					this.$showToast(res.message)
				}
				this.firstLoad = true
				uni.hideLoading()
			},
			goBackHome() {
				const pageNum = getCurrentPages()
				if (pageNum.length > 1) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/card/card'
					})
				}
			},

		},


	}
</script>

<style>
	page {
		height: 100%;
		background-color: #F7F8FA;
	}
</style>
<style lang="scss" scoped>
	.containWp {
		height: 100%;

		::v-deep {
			.popup {
				.uicon-close {
					font-size: 30rpx !important;
					line-height: 30rpx !important;
					padding-left: 20rpx;
				}

				.u-popup__content__close {
					z-index: 10 !important;
				}
			}

		}

		view {
			box-sizing: border-box;
		}

		.topBox {
			position: sticky;
			top: 0;
			z-index: 10;

			.searchBox {
				background: linear-gradient(to left, #2367ec, #044ddd);

				.search {
					width: 100%;
					box-sizing: border-box;

					::v-deep {
						.searchWrap {
							background-color: transparent;
						}
					}
				}

			}

			.tabsBox {
				width: 100%;
				background-color: #fff;

				.tabs {
					height: 90rpx;

					::v-deep {
						.u-tabs__wrapper__scroll-view-wrapper {
							overflow: auto;
						}

						.u-tabs__wrapper__scroll-view,
						.u-tabs__wrapper__scroll-view-wrapper,
						.u-tabs__wrapper__nav__item {
							height: 80rpx;
							font-weight: 600;
						}
					}
				}

				.tabChange {
					height: 104rpx;
					padding: 0 32rpx;

					.tabChangeItem {
						width: 30%;
						height: 56rpx;
						font-size: 28rpx;
						line-height: 56rpx;
						text-align: center;
						color: #4E5969;
						background-color: #F7F8FA;
						transition: all .4s ease;
					}

					.selectTabItem {
						color: #276AEE;
						background-color: #E9F0FD;
					}

				}
			}

		}

		.content {
			padding-bottom: 50rpx;

			.labelBox {
				padding: 32rpx 10rpx 0 32rpx;
				flex-wrap: wrap;
				font-size: 24rpx;

				.label {
					padding: 10rpx 14rpx;
					border-radius: 6rpx;
					margin-bottom: 24rpx;
					margin-right: 34rpx;
				}
			}

			.searchList {
				padding: 32rpx;

				.searchItem {
					min-height: 176rpx;
					border-radius: 16rpx;
					background-color: #fff;
					padding: 24rpx;
					font-size: 24rpx;
					color: #4E5969;
					line-height: 34rpx;
					margin-bottom: 24rpx;

					.searchItemInfo {
						padding-left: 24rpx;
						margin: 8rpx 0;
						color: #276AEE;
						text-align: left;
						flex: 1;

						.name {
							font-size: 32rpx;
							font-weight: 600;
							color: #1D2129;
							line-height: 45rpx;
						}

						.company {
							color: #4E5969;
							margin: 8rpx 0;
						}
					}
				}

			}

			.empty {
				padding-top: 350rpx;
				padding-bottom: 100rpx;
			}
		}


		.pop-show {
			z-index: 9;
			position: relative;
			padding: 0 32rpx;
			font-size: 32rpx;
			color: #1D2129;
			line-height: 45rpx;
			padding-bottom: 40rpx;

			.pop-show-top {
				width: 260rpx;
				text-align: center;
				font-weight: bold;
				font-size: 34upx;
				margin: 30upx auto;
			}

			.content {
				height: 160rpx;
				padding-top: 32rpx;
				border-bottom: 1rpx solid #E5E6EB;

				.label {
					font-size: 26rpx;
					font-weight: 400;
					color: #1D2129;
					line-height: 36rpx;
					margin-bottom: 16rpx;
				}
			}

			.radioBox {
				height: 168rpx;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #E5E6EB;

				::v-deep {
					.u-radio {
						margin-right: 26rpx;
					}
				}

				.label {
					font-size: 26rpx;
					font-weight: 400;
					color: #1D2129;
					line-height: 36rpx;
					margin-bottom: 16rpx;
				}

				.radioGroup {
					height: 100rpx;

				}
			}
		}
	}
</style>